<template>
  <div class="page-header">
    <div class="page-header-content">
      <div class="page-header-menu">
        <div v-for="(item,index) in menuList" :key="index" class="page-header-menuitem" @click="menuClick(item)" :class="{'page-header-menuitemative': curPath == item.path}">
          <div></div>
          <div>{{ item.name}}</div>
          <div v-if="item.count && counterStore.masValue > 0" class="page-header-badge">
            <el-badge :value="counterStore.masValue" class="item" :max="99"></el-badge>
          </div>
        </div>
      </div>
      <div class="page-header-userinfo align-items-center">
        <div class="f-12" v-if="counterStore.token && counterStore?.userInfo?.organization">
          <span>剩余点数: </span> <span class="bold red-color">{{counterStore.querytotal || '--'}}</span>
        </div>
        <div v-if="counterStore.token && counterStore?.userInfo?.organization"><el-divider direction="vertical"></el-divider></div>
        <div>
          <el-button @click="setLoginShow" v-if="!counterStore.token">登录</el-button>
        </div>
        <el-dropdown placement="bottom" @command="handleCommand" v-if="counterStore.token">
          <div class="page-header-userinfoicon"> 
            <el-avatar :size="40" :src="avatar" v-if="!userInfoData.avatar"/>
            <el-avatar :size="40" :src="userInfoData.avatar" v-if="userInfoData.avatar"/>
          </div> 
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item command="a">
                <div class="w-100" >我的分身</div>
              </el-dropdown-item>
              <el-dropdown-item command="b">
                <div class="w-100" >我的简历</div>
              </el-dropdown-item>
              <el-dropdown-item command="d">
                <div class="w-100" >员工管理</div>
              </el-dropdown-item>
              <el-dropdown-item command="c">
                <div class="w-100" >退出登录</div>
              </el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
    </div>
    <login-component v-if="counterStore.isLoginShow" @onClose="setLogin" @confirm="confirm" :loginType="1"></login-component>
    <userinfo-component v-if="userShow" :profile="profile" @onClose="userShow=false" @confirm="updateConfirm"></userinfo-component>
  </div>
</template>

<script setup>
import { getUserInfo, logout, notificationHearBeat } from '@/api/api'
import loginComponent from '@/components/login/login.vue'
import userinfoComponent from '@/components/userinfo/userinfo.vue'
import { ref, onMounted, watch, onUnmounted } from 'vue'
import { useSideStore } from '@/store/state'
import avatar from '@/assets/usericon.png'
import { useRouter } from 'vue-router'
import { Toast } from '@/utils/vant'
import { getToken, setKeyItem} from '@/utils/auth'
const counterStore = useSideStore()
const userInfoData = ref({})
const router = useRouter();
const curPath = ref("")
const userShow = ref(false)
const loginShow = ref(false)
const profile = ref({})
const menuList = ref([
  {
    name: '数字分身',
    path: '/agents',
    ative: false,
  },
  {
    name: 'AI面试官',
    path: '/interview',
    ative: false,
  },
  {
    name: '消息中心',
    path: '/notification',
    ative: false,
    count: true
  },
  {
    name: '我的面试',
    path: '/myinterview',
    ative: false
  }
])
const timer = ref(null);
const count = ref(0)
const handleCommand = (command) => {
  switch (command) {
      case 'a':
        myspare();
        break;
      case 'b':
        myresume();
        break;
      case 'c':
        loginout();
        break; 
      case 'd':
        sffaf();
        break; 
      default:
        break;
    }
} 

watch(() => 
  router.currentRoute.value.path,
  (toPath) => {
    //要执行的方法
    curPath.value = router.currentRoute.value.fullPath;
  },{immediate: true,deep: true})

const loginout = () => {
  logout().then(res => {
    if (res.code == 1000) {
      router.push({
        path: "/agents"
      })
      setTimeout(() => {
        setKeyItem('bytesbayToken', "")
        setKeyItem('userInfo', "")
        counterStore.SETTOKEN('')
      }, 500)
      // setTimeout(() => {
      //   window.location.reload()
      // }, 1000)
    }
  })
}

const menuClick = (e) => {
  // if (e.path == '/interview') {
  //   if (!counterStore?.userInfo?.organization) {
  //     Toast('暂无组织架构，联系客服开通企业账号')
  //     return
  //   }
  // }
  // if (e.path == '/notification' || e.path == '/myinterview') {
  //   if (!userInfoData.organization) {
  //     Toast('暂无组织机构')
  //     router.push({
  //       path:"/"
  //     })
  //     return
  //   }
  // }
  if (e.path == '/interview' || e.path == '/notification' || e.path == '/myinterview') {
    if (!getToken()) {
      counterStore.SETLOGINSHOW(true)
      return
    }
  }
  router.push({
    path: e.path
  })
}
const myspare = () => {
  router.push({
    path:"/profile/myAgents"
  })
}

const sffaf = () => {
  router.push({
    path:"/profile/staff"
  })
}

const myresume = () => {
  router.push({
    path:"/profile/resume"
  })
} 

const confirm = (e) => {
  loginShow.value = false 
  profile.value = e.profile
  if (e?.complete == 1) {
    userShow.value = true
  }
  // getUserInfoItem()
}

// const getUserInfoItem = () => {
//   getUserInfo().then(res => {
//     if (res.code == 1000 ) {
//       userInfoData.value = res.data
//       sessionStorage.setItem("userInfo", JSON.stringify(res.data))
//     }
//   })
// }

const getUserInfoItem = (cb) => {
  console.log('-----getUserInfoItem--------------')
  getUserInfo().then(res => {
    if (res.code == 1000 ) {
      userInfoData.value = res.data
      counterStore.SETUSERINFO(res.data)
      setKeyItem("userInfo", JSON.stringify(res.data))
      cb && cb()
      // if (!res.data.fullname) {
      //   userShow.value = true
      // } else {
      //   userShow.value = false
      // }
    }
  })
}

const setLoginShow = () => {
  counterStore.SETLOGINSHOW(true)
}

const setLogin = () => {
  counterStore.SETLOGINSHOW(false)
}

const updateConfirm = () => {
  userShow.value = false
  getUserInfoItem(() => {
    window.location.reload()
  })
  
}

onUnmounted(() => {
  setInterval(timer.value)
})

const getMeasge = () => {
  notificationHearBeat().then(res => {
    counterStore.SETMASVALUE(res.data?.unread)
    counterStore.SETQUERYTOTAL(res.data?.balance)
    // count.value = res.data
  })
} 


onMounted(() => {
  if (getToken()) {
    getUserInfoItem()
    counterStore.SETTOKEN(getToken())
  } else {
    if(router.currentRoute.value.path.indexOf('agents') == -1){
      setLoginShow()
    } 
  }

  getMeasge()
  timer.value = setInterval(() => {
    getMeasge()
  }, 10000) 
  

})
</script>

<style lang="scss" scoped>
.page-header{
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 105;
  background: #fff;
  border-bottom: 1px solid rgb(140 140 140 / .2);
  &-content{
    align-items: center;
    display: flex;
    flex-direction: row;
    margin: 0 auto;
    min-height: 100%;
    width: 996px;
  }
  &-menu{
    flex:1;
    display: flex;
    flex-direction: row;
  }

  &-menuitem{
    display: flex;
    flex-direction: column;
    padding: 4px 0;
    height: 46px;
    line-height: 46px;
    text-align: center;
    position: relative;
    align-items: center;
    cursor: pointer;
    margin-right: 48px;
  }
  &-userinfo{
    display: flex;
    flex-direction: row;
  }
  &-userinfoicon{
    width: 40px;
    height: 40px;
    border-radius: 40px;
    border: 1px solid rgb(140 140 140 / .2);
    cursor: pointer;
    background: url("@/assets/usericon.png") center center no-repeat;
    background-size: 42px auto;
    overflow: hidden;
  }

  &-menuitemative::before{
    content: "";
    position: absolute;
    width: 100%;
    height: 3px;
    background: #000;
    bottom: 0;
    border-radius: 4px;
  }
  &-badge{
    position: absolute;
    right: -10px;
    top: 20%;
    transform: translateY(-50%);
  }
}
</style>